<template>
  <div class="map" flex>
    <Panel>
      <template slot="inner">
        <div class="total-count">
          <i>数据归集总量</i>
          <i
            v-for="(item, index) in countNumList"
            :key="index"
            class="total-num"
            :class="'num' + item"
          ></i>
          <i>&nbsp;个</i>
        </div>
        <div class="map-container">
          <div id="map"></div>
          <div class="mask-cir-container">
            <div class="mask-inner">
              <div class="rotate-cir-1"></div>
              <div class="rotate-cir-2"></div>
            </div>
          </div>
        </div>
        <div class="bar-container">
          <Card>
            <template slot="title">
              <div flex="main:justify">
                <span>各部门数据提报数量</span>
                <span class="handle-date" flex="main:justify"> </span>
              </div>
            </template>
            <template slot="content">
              <chart ref="barChart" id="barChart" :options="barOption"></chart>
            </template>
          </Card>
        </div>
      </template>
    </Panel>
  </div>
</template>

<script>
import echarts from 'echarts'
import Panel from '../../../components/Panel/Panel'
import Card from '../../../components/Card/Card'
import 'echarts/map/js/china'
// 更换地方地图 例：import 'common/utils/zhenjiang.js'
// import Bmap from 'bmap'
export default {
  name: 'Map',
  mounted() {
    this.renderMap({ id: 'map' })

    this.randomNumChange()
  },
  components: {
    Panel,
    Card
  },
  data() {
    return {
      countNumList: [3, 9, 6, 3, 6, 0, 5, 8],
      barOption: {
        tooltip: {
          show: false
        },
        grid: {
          left: 10,
          right: 10,
          bottom: '4%',
          top: '4%'
        },
        xAxis: {
          show: false,
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: [
            '部门1',
            '部门2',
            '部门3',
            '部门4',
            '部门5',
            '部门6',
            '部门7',
            '部门8',
            '部门9',
            '部门10'
          ],
          show: true,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            inside: true,
            color: '#fff',
            padding: [-60, 0, 0, 0]
          },
          inverse: true
        },
        series: [
          {
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
            },
            barWidth: 10,
            label: {
              show: true,
              color: '#fff',
              offset: [0, -30],
              position: 'insideRight',
              formatter: p => {
                return p.value
              }
            },
            itemStyle: {
              barBorderRadius: 8,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#2f54ee' },
                { offset: 1, color: '#288cf1' }
              ])
            },
            data: [1100, 900, 850, 800, 750, 650, 550, 490, 480, 470]
          }
        ]
      }
    }
  },
  methods: {
    randomNumChange() {
      let change = setInterval(() => {
        let arr = []
        this.countNumList.forEach(item => {
          arr.push(parseInt(Math.random() * 10))
        })
        this.countNumList = arr
      }, 20)
      setTimeout(() => {
        window.clearInterval(change)
      }, 2000)

      let num = parseInt(this.countNumList.join(''))
      setInterval(() => {
        num += parseInt(Math.random() * 10)
        if (num >= 99999999) {
          num = 10000000
        }
        let str = num.toString()
        let arr = str.split('')
        this.countNumList = arr
      }, 100)
    },
    renderMap(paramObj) {
      var effect = '#06eaed'
      var flyLine = '#ffffff'
      var border = '#105689'
      var bg = 'rgba(2,10,34,0.8)'
      var bg1 = '#040c22'
      var chinaGeoCoordMap = {
        黑龙江: [126.642464, 47.756967],
        内蒙古: [110.3467, 41.4899],
        吉林: [125.8154, 44.2584],
        北京市: [116.4551, 40.2539],
        辽宁: [123.1238, 42.1216],
        河北: [115.4995, 38.1006],
        天津: [117.4219, 39.4189],
        山西: [112.3352, 37.9413],
        陕西: [109.1162, 34.2004],
        甘肃: [103.5901, 36.3043],
        宁夏: [106.3586, 38.1775],
        青海: [97.4038, 36.8207],
        新疆: [87.617733, 43.792818],
        西藏: [91.11, 29.97],
        四川: [103.9526, 30.7617],
        重庆: [108.384366, 30.439702],
        山东: [117.1582, 36.8701],
        河南: [113.4668, 34.6234],
        江苏: [119.9062, 33.2208],
        安徽: [117.29, 32.0581],
        湖北: [114.3896, 30.6628],
        浙江: [119.5313, 29.8773],
        福建: [117.4543, 25.9222],
        江西: [116.0046, 28.6633],
        湖南: [113.0823, 28.2568],
        贵州: [106.6992, 26.7682],
        广东: [113.12244, 23.009505],
        广西: [108.479, 23.1152],
        海南: [110.3893, 19.8516],
        上海: [121.4648, 31.2891],
        云南: [102.712251, 25.040609]
      }
      var chinaDatas = [
        [
          {
            name: '黑龙江',
            value: 76594
          }
        ],
        [
          {
            name: '北京市',
            value: 2586576
          }
        ],
        [
          {
            name: '内蒙古',
            value: 14556
          }
        ],
        [
          {
            name: '吉林',
            value: 14656
          }
        ],
        [
          {
            name: '辽宁',
            value: 47834
          }
        ],
        [
          {
            name: '河北',
            value: 102375
          }
        ],
        [
          {
            name: '天津',
            value: 34894
          }
        ],
        [
          {
            name: '山西',
            value: 38946
          }
        ],
        [
          {
            name: '陕西',
            value: 4545
          }
        ],
        [
          {
            name: '甘肃',
            value: 45655
          }
        ],
        [
          {
            name: '宁夏',
            value: 34546
          }
        ],
        [
          {
            name: '青海',
            value: 23434
          }
        ],
        [
          {
            name: '新疆',
            value: 9867
          }
        ],
        [
          {
            name: '西藏',
            value: 1343
          }
        ],
        [
          {
            name: '四川',
            value: 23345
          }
        ],
        [
          {
            name: '重庆',
            value: 7465
          }
        ],
        [
          {
            name: '山东',
            value: 64355
          }
        ],
        [
          {
            name: '河南',
            value: 15656
          }
        ],
        [
          {
            name: '江苏',
            value: 234544
          }
        ],
        [
          {
            name: '安徽',
            value: 109856
          }
        ],
        [
          {
            name: '湖北',
            value: 173453
          }
        ],
        [
          {
            name: '浙江',
            value: 245466
          }
        ],
        [
          {
            name: '福建',
            value: 128435
          }
        ],
        [
          {
            name: '江西',
            value: 98656
          }
        ],
        [
          {
            name: '湖南',
            value: 158546
          }
        ],
        [
          {
            name: '贵州',
            value: 8675
          }
        ],
        [
          {
            name: '广西',
            value: 3454
          }
        ],
        [
          {
            name: '海南',
            value: 28496
          }
        ],
        [
          {
            name: '上海',
            value: 35456
          }
        ],
        [
          {
            name: '云南',
            value: 15465
          }
        ]
      ]
      var convertData = function(data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i]
          var fromCoord = chinaGeoCoordMap[dataItem[0].name]
          // 中心点坐标
          var toCoord = [116.4551, 40.2539]
          if (fromCoord && toCoord) {
            res.push([
              {
                coord: fromCoord,
                value: dataItem[0].value
              },
              {
                coord: toCoord
              }
            ])
          }
        }
        return res
      }
      var series = [];
      [['北京市', chinaDatas]].forEach(function(item, i) {
        series.push(
          {
            type: 'lines',
            tooltip: { show: false },
            zlevel: 1,
            effect: {
              show: true,
              period: 5, // 箭头指向速度，值越小速度越快
              trailLength: 0.1, // 特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow',
              symbolSize: [5, 10] // 图标大小
            },
            lineStyle: {
              color: flyLine,
              width: 1, // 尾迹线条宽度
              opacity: 0.1, // 尾迹线条透明度
              curveness: 0.8 // 尾迹线条曲直度
            },
            data: convertData(item[1])
          },
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
              // 涟漪特效
              period: 4, // 动画时间，值越小速度越快
              brushType: 'stroke', // 波纹绘制方式 stroke, fill
              scale: 3 // 波纹圆环最大限制，值越大波纹越大
            },
            label: {
              normal: {
                show: true,
                position: 'right', // 显示位置
                offset: [8, 0], // 偏移设置
                // 圆环显示文字
                formatter: function(params) {
                  return params.data.name
                },
                fontSize: 13
              },
              emphasis: {
                show: false
              }
            },
            symbol: 'circle',
            symbolSize: function(val) {
              return 8 + val[2] * 2 // 圆环大小
            },
            itemStyle: {
              normal: {
                show: false,
                color: effect
              }
            },
            data: item[1].map(function(dataItem) {
              return {
                name: dataItem[0].name,
                value: chinaGeoCoordMap[dataItem[0].name].concat([
                  dataItem[0].value
                ])
              }
            })
          },
          // 标的点
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
              period: 4,
              brushType: 'stroke',
              scale: 2
            },
            label: {
              textBorderColor: '#000',
              show: true,
              position: 'right',
              // offset:[5, 0],
              color: '#00d0ff',
              formatter: '{b}',
              textStyle: {
                fontSize: 22,
                color: '#fff'
              },
              // textShadowColor:'#fff',
              // textShadowBlur:2,
              emphasis: {
                show: true,
                color: '#f60'
              }
            },
            symbol: 'pin',
            symbolSize: 30,
            data: [
              {
                name: item[0],
                value: chinaGeoCoordMap[item[0]].concat([10])
              }
            ]
          }
        )
      })
      var option = {
        tooltip: {
          trigger: 'item',
          borderColor: '#FFFFCC',
          showDelay: 0,
          hideDelay: 0,
          enterable: true,
          transitionDuration: 0,
          extraCssText: 'z-index:100',
          formatter: function(params, ticket, callback) {
            // 根据业务自己拓展要显示的内容
            var res = ''
            var name = params.name
            var value = params.value[params.seriesIndex + 1]
            res =
              "<span style='color:#fff;'>" +
              name +
              '</span><br/>数据：' +
              value
            return res
          }
        },
        geo: {
          map: 'china',
          zoom: 1.2,
          label: {
            emphasis: {
              show: false
            }
          },
          roam: false, // 是否允许缩放
          itemStyle: {
            normal: {
              color: 'rgba(51, 69, 89, 0.2)', // 地图背景色
              // color:'#0f1d37',
              borderColor: border, // 省市边界线00fcff 516a89
              borderWidth: 1,
              shadowColor: bg,
              shadowBlur: 4
            },
            emphasis: {
              color: 'rgba(37, 43, 61, .5)' // 悬浮背景
            }
          }
        },
        series: series
      }
      var chart = echarts.init(document.getElementById(paramObj.id))
      chart.setOption(option)
    }
  }
}
</script>

<style lang="stylus" scoped>
.panel
  overflow hidden

  background-position: bottom center
  -webkit-background-size: contain
  background-size: contain
  background-repeat: no-repeat
  background-image: url('~@/assets/images/map/map_bg.png')

  >>> .light-bg
    height: 100%
    background-color: transparent
    box-shadow 0 0 0 transparent
    animation none
    border: none

    .light-corner
      opacity 0

.map
  height: 1000px
  position relative
  padding: 20px 0
  box-sizing border-box

  #map
    position absolute
    z-index 30
    top: 150px
    left: 0
    overflow hidden
    width: 1116px;
    height: 722px;

  .map-container
    height: 100%
    width: 1860px
    padding 30px 0
    margin: 0 auto
    position relative

  .bar-container
    height: 100%
    position absolute
    top: 150px
    right: 0

    #barChart
      width: 744px
      height: 722px;

  .mask-cir-container
    position absolute
    z-index 20
    bottom: -125px
    left: 30%
    transform translateX(-50%)

    .mask-inner
      position relative

      &::before
        position absolute
        left: -94px;
        bottom: 327px;
        content: '';
        display: inline-block;
        width: 358px;
        height: 90px;
        background-color: rgba(5, 8, 25, 1);
        z-index: 200;
        border-radius: 200px 0 200px 0

      .rotate-cir-1
        position absolute
        z-index 1
        width 80px
        height: 80px
        -webkit-border-radius: 50%
        -moz-border-radius: 50%
        border-radius: 50%
        border: 1px dashed #11387f
        left: 50%
        animation rotate linear 10s infinite
        text-align center

      .rotate-cir-2
        @extend .rotate-cir-1
        border-style solid
        animation shadow-light infinite linear 3s
        transform: translate(-50%, -320px) rotateX(80deg) rotateZ(0) scale(10)

.total-count
  position absolute
  top: 20px
  left 50%
  transform translateX(-50%)
  width: 800px
  text-align center
  font-size: 26px
  font-weight: 700
  color #fff
  letter-spacing 8px

  i
    display inline-block
    vertical-align middle
    margin 4px

    &:first-of-type
      padding-right: 20px

    &.total-num
      width 49px
      height: 55px

    &.num0
      background-image: url('~@/assets/images/overview/0.png')

    &.num1
      background-image: url('~@/assets/images/overview/1.png')

    &.num2
      background-image: url('~@/assets/images/overview/2.png')

    &.num3
      background-image: url('~@/assets/images/overview/3.png')

    &.num4
      background-image: url('~@/assets/images/overview/4.png')

    &.num5
      background-image: url('~@/assets/images/overview/5.png')

    &.num6
      background-image: url('~@/assets/images/overview/6.png')

    &.num7
      background-image: url('~@/assets/images/overview/7.png')

    &.num8
      background-image: url('~@/assets/images/overview/8.png')

    &.num9
      background-image: url('~@/assets/images/overview/9.png')

@keyframes rotate {
  0% {
    transform: translate(-50%, -340px) rotateX(80deg) rotateZ(0) scale(10)
  }
  50% {
    transform: translate(-50%, -340px) rotateX(80deg) rotateZ(0.5turn) scale(10)
  }
  100% {
    transform: translate(-50%, -340px) rotateX(80deg) rotateZ(1turn) scale(10)
  }
}

@keyframes shadow-light {
  0% {
    box-shadow: 0 0 4px rgba(20, 140, 250, 0.2), 0 0 4px rgba(20, 140, 250, 0.2) inset
  }
  50% {
    box-shadow: 0 0 10px rgba(20, 140, 250, 0.5), 0 0 10px rgba(20, 140, 250, 0.5) inset
  }
  100% {
    box-shadow: 0 0 4px rgba(20, 140, 250, 0.2), 0 0 4px rgba(20, 140, 250, 0.2) inset
  }
}
</style>
